<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div style="width: 900px; height: 508px;">
    <div id="map" style="width: 100%; height: 100%;"></div>
</div>
<input type="hidden" id="lat" value="${lat}" >
<input type="hidden" id="lon" value="${lng}">
<script type="text/javascript">
    var map = new BMap.Map("map");          // 创建地图实例

    var lat, lng;
    if($("#lat").val() != ""){
        lat = $("#lat").val();
        lng = $("#lon").val();
    } else {
        lat = 36.619174;
        lng = 117.032644;
    }

    map.centerAndZoom(new BMap.Point(lng, lat),18);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    var marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建点
    var geoc = new BMap.Geocoder();

    geoc.getPoint("${init}", function(point){
        if (point) {
            map.centerAndZoom(point, 16);
            marker = new BMap.Marker(point);
        }else{
            alert("您输入地址没有解析到结果!");
        }
    }, "北京市");

    map.addEventListener("tilesloaded",function(){
        map.addOverlay(marker);
        marker.enableDragging();
    });

    function showInfo(e){
        map.clearOverlays();
        var pt = new BMap.Point(e.point.lng, e.point.lat);
        marker = new BMap.Marker(pt);  // 创建标注
        map.addOverlay(marker);//标注加载到地图
        var geoc = new BMap.Geocoder();
        var pt1 = e.point;

    }
    map.addEventListener("click", showInfo);
    function getMarkInfo(){
        $("#lat").val(marker.getPosition().lat);
        $("#lon").val(marker.getPosition().lng);
        layer.close(layer_mapModule);
    }
</script>